// import 'dart:js';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:recipe/module/globalColor.dart';

class MenuCard extends StatefulWidget {
  final clickGetFoodList;
  List menuList = [];
  MenuCard({Key key, @required this.menuList, @required this.clickGetFoodList})
      : super(key: key);
  @override
  _MenuCardState createState() => _MenuCardState();
}

class _MenuCardState extends State<MenuCard> {
  List<Widget> renderMenuList(menuList, context) {
    List<Widget> list = [];
    List.generate(menuList.length, (index) {
      final item = menuList[index];
      list.add(
        InkWell(
            onTap: () {
              widget.clickGetFoodList(1, item["type"], item["order"], '');
            },
            child: Container(
              decoration: BoxDecoration(color: Colors.white),
              padding: EdgeInsets.only(left: 18, right: 18, top: 18),
              width: MediaQuery.of(context).size.width / 4,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                      child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    child: FadeInImage.assetNetwork(
                      placeholder: 'assets/images/placeholder.png',
                      fadeInDuration: const Duration(milliseconds: 500),
                      image: item['imgUrl'],
                      // image:s
                    ),
                  )),
                  SizedBox(height: 5),
                  Text(
                    item['name'],
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 11,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            )),
      );
    });
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(bottom: 15),
      child: Wrap(
        children: renderMenuList(widget.menuList, context),
      ),
    );
  }
}
